<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%>
<!-- 访问的基本路径，此页面所有的跳转都基于此地址 -->
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>专辑管理</title>
<!--主题样式-->
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/default/easyui.css">
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="resources/easyui/demo/demo.css">
<!--jquery文件-->
<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<!--easyui的核心js-->
<script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script>
<!-- 引入中文文件 -->
<script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
	.textbox textarea.textbox-text {
		white-space: pre-wrap;
	}
</style>
<script type="text/javascript">
	$(function(){
		//ajax设置为同步请求
		//$.ajaxSetup({async : false});
		
		//datagrid表格属性设置
		$("#myDataGrid").datagrid({
			title:'专辑列表',
			fitColumns:true, //按比例设置宽度
			fit:true, //设置布局适应它的父容器大小
			url:'cd/cdList.do', //查询专辑列表跳转的链接
			method:'post', //提交的方式
			toolbar:"#toolbar,#search", //将增删改查的工具栏添加进来
			pagination:true, //显示分页栏
			pageList:[5,10,20], //每页数据量选择
			pageSize:10, //默认每页数据量 
			striped:true, //斑马线效果
			singleSelect:true //只能选中一行,默认可选多行
			
		});
		
		//添加新专辑对话框属性设置
		$("#cdDialog").dialog({
			width:350, //对话框宽度
			height:450, //对话框高度
			buttons:"#dialogButtons", //加载底部工具栏按钮
			closed:true //默认关闭对话框
		});
		
		//使用combobox 组件加载 角色
		$("#singer_id").combobox({
			url:"cd/selectSinger.do",
			valueField:'singer_id',    
		    textField:'singer_name'
		});
		
		//初始化搜索栏的时间选项
		/* $('#searcher_end').datebox(
			'setValue', 
			formatterDate(new Date()
		)); */
		
	})
	
	//格式化时间
	formatterDate = function (date) {
		var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
		var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : "0"
		+ (date.getMonth() + 1);
		return date.getFullYear() + '-' + month + '-' + day;
	};
	
	//搜索栏触发的方法
	function doSearch(){
		//给参数转码解决乱码问题
		/* var action = encodeURI(value);
		$.ajax({
			url:'/cd/cdSelect.do', //跳转地址
			type:'get', //请求方式
			data:{cdName:action}, //客户端发送给服务器的参数
			success:function(data){ //请求成功后返回的数据
				console.log(data);
				$('#myDataGrid').datagrid('loadData', data);
			}
		}); */
		if($("#searcher_begin").val() != "" && $("#searcher_end").val() != "" && $("#searcher_begin").val() > $("#searcher_end").val()){
			$.messager.alert("警告","第一个时间段必须小于第二个时间段","warning");
		}else{
			$("#myDataGrid").datagrid("load",{
				cd_name:$("#searcher_cd").val(),
				singer_name:$("#searcher_singer").val(),
				cd_begin:$("#searcher_begin").val(),
				cd_end:$("#searcher_end").val()
			})
		}
	}
	
	//搜索栏触发的方法
	/* function doSearch(value){
		//出现乱码问题,需要使用encodeURI()函数进行编码,但第一次转码是出现%,依旧会导致乱码,所以需要两次转码,第二次转码时会将%看做转义字符
		var url = encodeURI(encodeURI(value));
		//浏览器有兼容性问题 将window.location.href("/cd/cdSelect")
		window.location.href="/cd/cdSelect.do?cdName="+url;
		
	}  */
	
	//点击添加按钮打开对话框
	function addDialog(){
		$("#cdDialog").dialog("open"); //打开对话框
		$("#cdDialog").dialog("setTitle","添加专辑"); //给对话框添加顶部名称
		
		//给日期框设置初始值
		//$('#cd_publish').datebox('setValue', formatterDate(new Date()));
		
		//清楚已有的数据
		//$("#cdForm").form("clear"); //清除表单全部的数据
		//$("#cd_radio").attr("checked","checked"); //更改checked的属性
		//$("#cd_cover").val("");
		$("#cd_id").val("");
		$("#cd_name").val("");
		//$("#cd_like").val("");
		//$("#cd_count").val("");
		$("#cd_like").textbox('setValue','');
		$("#cd_count").textbox('setValue','');
		$("#cd_publish").datebox("clear");
		$("#singer_id").combobox("clear");
		$("#cd_info").val("");
	}
	
	//点击修改按钮打开对话框
	function editDialog(){
		//获取选中行的数据
		var rowData = $("#myDataGrid").datagrid("getSelected");
		if(rowData == null){
			$.messager.alert("警告","请选择需要修改的专辑","warning");
			return;
		}
		
		//回显表单数据
		$("#cdForm").form("load", rowData);
		//打开对话框
		$("#cdDialog").dialog("open");
		$("#cdDialog").dialog("setTitle", "修改专辑");
	}
	
	//点击删除按钮打开对话框
	function delDialog(){
		//获取选中行的数据
		var rowData = $("#myDataGrid").datagrid("getSelected");
		if(rowData == null){
			$.messager.alert("警告","请选择需要删除的专辑","warning");
			return;
		}
		$.messager.confirm('确认','确定删除这张专辑吗?此操作不可逆!',function(r){
			if(r){
				//获取将要删除的专辑id
				var cd_id = rowData.cd_id;
				$.ajax({
					url:'cd/deleteCD.do',
					type:'get',
					data:{cd_id:cd_id},
					success:function(data){
						//data = eval("("+data+")");
						if(data.code == 1){
							$.messager.alert("温馨提示",data.msg,"info");
							//关闭对话框
							$("#cdDialog").dialog("close");
							//重新加载datagrid
							$("#myDataGrid").datagrid("load");
						}else{
							$.messager.alert("警告",data.msg,"error");
						}
					}
				});
			}
		});
	}
	
	//点击专辑对话框底部保存按钮
	function saveDialog(){
		//获取专辑id
		var cd_id = encodeURI($("#cd_id").val());
		console.log("#cd_id");
		if(cd_id == ""){
			var url = "cd/addCD.do";
		}else{
			var url = "cd/updateCD.do";
		}
		success(url);
		/* $.ajax({
			url:'/cd/cdSelect.do', //跳转地址
			type:'get', //请求方式
			data:{cd_name:cd_name}, //客户端发送给服务器的参数
			success:function(data){ //请求成功后返回的数据
				//因为ajax是异步请求,所以下面的方法执行时ajax不一定返回了数据
				//所以下面想用返回的data数据时,有两个办法
				//1.在jsp页面预加载时将ajax设置为同步请求$.ajaxSetup({async : false});
				//2.在得到data数据后使用回调函数
				//使用第二个方法更好也更合理
				if(data.code == 1){
					url = "cd/updataCD.do";
				}else{
					url = "cd/addCD.do";
				}
				//根据返回的数据传入不同的参数
				success(url);
			}
		}); */
		
	}
	
	//点击保存按钮成功返回数据后执行的方法
	function success(url){
		console.log(url);
		$("#cdForm").form('submit',{
			url:url,
			
			success:function(data){
				data = eval("("+data+")");
				if(data.code == 1){
					$.messager.alert("温馨提示",data.msg,"info");
					//关闭对话框
					$("#cdDialog").dialog("close");
					//重新加载datagrid
					$("#myDataGrid").datagrid("load");
				}else{
					$.messager.alert("警告",data.msg,"error");
				}
			}
		})
	}
	
	//点击专辑对话框底部取消按钮
	function closeDialog(){
		$("#cdDialog").dialog("close"); //关闭专辑对话框
	}
	
</script>
<!-- 增删改查工具栏 -->
<div id="toolbar">
	<a class="easyui-linkbutton" data-options="{iconCls:'icon-add',plain:true}" onclick="addDialog()">增加专辑</a>
	<a class="easyui-linkbutton" data-options="{iconCls:'icon-edit',plain:true}" onclick="editDialog()">编辑专辑</a>
	<a class="easyui-linkbutton" data-options="{iconCls:'icon-remove',plain:true}" onclick="delDialog()">删除专辑</a>
</div>

<!-- 搜索栏 -->
<div id="search">
	<form action="">
		<!-- searcher:点击按钮调用方法 prompt:搜索栏默认内容 -->
		专辑名称:<input id="searcher_cd">&nbsp&nbsp
		歌手姓名:<input id="searcher_singer">&nbsp&nbsp
		发行时间:<input id="searcher_begin" name="searcher_publish" class="easyui-datebox">&nbsp&nbsp
		至:&nbsp&nbsp<input id="searcher_end" name="searcher_publish" class="easyui-datebox">&nbsp&nbsp
		<a onclick="doSearch()" class="easyui-linkbutton" data-options="{iconCls:'icon-search',plain:true}">搜索</a><!-- plain:true改变图标样式 -->
	</form>
</div>

<!-- 专辑信息 datagrid组件 -->
<table id="myDataGrid" class="easyui-datagrid">
	<thead>
		<tr>
			<!-- field:后台数据对应的属性名 formatter:自定义和石化列数据显示效果，如果设置fitColumns:true,width属性的意思是等比例设置宽度 -->
			<th data-options="field:'cd_cover',width:1">专辑封面</th>
			<th data-options="field:'cd_name',width:1.5">专辑名称</th>
			<th data-options="field:'singer_name',width:1">歌手名称</th>
			<th data-options="field:'cd_count',width:1">歌曲数量</th>
			<th data-options="field:'cd_publish',width:1">发行时间</th>
			<th data-options="field:'cd_like',width:1">收藏次数</th>
			<th data-options="field:'cd_info',width:2.5">专辑简介</th>
		</tr>
	</thead>
</table>

<!-- 添加专辑的对话框 -->
<div id="cdDialog" class="easyui-dialog">
	<form id="cdForm" action="" method="post">
		<input type="hidden" id="cd_id" name="cd_id">
		<table align="center" cellspacing="12">
			<tr>
				<td style="">专辑名称:</td>
				<!-- class="easyui-validatebox":输入框的内容必须校验  data-options="{required:true}":输入框不能为空-->
				<td><input id="cd_name" name="cd_name" class="easyui-validatebox" style="width:175" data-options="{required:true}"></td>
			</tr>
			<tr>
				<td style="">收藏次数:</td>
				<td><input id="cd_like" name="cd_like" class="easyui-textbox" style="width:175"></td>
			</tr>
			<tr>
				<td style="">歌曲数量:</td>
				<td><input id="cd_count" name="cd_count" class="easyui-textbox" style="width:175"></td>
			</tr>
			<tr>
				<td style="">发行时间:</td>
				<td><input id="cd_publish" name="cd_publish" class="easyui-datebox" style="width:175"></td>
			</tr>
			<tr>
				<td style="">歌手姓名:</td>
				<td>
					<input id="singer_id" name="singer_id"  class="easyui-combobox" data-options="{required:true}" style="width:175">
				</td>
			</tr>
			<tr>
				<td style="">专辑封面:</td>
				<td><input id="cd_cover" name="cd_cover" class="easyui-filebox"
				 data-options="{prompt:'上传图片',buttonText:'选择图片' ,accept:'image/gif,image/jp2,image/jpeg,image/jpeg,image/jpeg,image/png,image/vnd.svf,image/tiff,image/tiff'}" style="width:175"></td>
			</tr>
			<tr>
				<td style="">专辑状态:</td>
				<td><input type="radio" id="cd_radio" name="cd_status" value="0" checked="checked">可用
				    <input type="radio" name="cd_status" value="1">禁用</td>
			</tr>
			<tr>
				<td style="">专辑简介:</td>
				<td><textarea id="cd_info" style="resize:none; width:180; height:54" name="cd_info"></textarea></td>
			</tr>
		</table>
	</form>
</div>

<!-- cd对话框底部工具条 -->
<div id="dialogButtons">
	<a onclick="saveDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-save',plain:true}">保存</a>
	<a onclick="closeDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>


